<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>08路径分页标签和徽章组件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
    </style>
</head>

<body style="margin: 200px;">

    <!-- 路径组件 -->
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品列表</a></li>
        <li class="active">韩版2016羊绒大衣</li>
    </ol>

    <!-- 默认分页 -->
    <ul class="pagination pagination-lg">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

    <!-- 翻页效果 -->
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
    <!-- 对齐翻页链接 -->
    <ul class="pager">
        <li class="previous disabled"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>

    <!-- 标签   在文本后面带上标签  还有不同颜色的标签  随着文本大小标签大小变化 -->
    <h3>标签<span class="label label-default">new</span></h3>
    <h2>标签<span class="label label-success">new</span></h2>
    <h5>标签<span class="label label-info">new</span></h5>

    <!-- 未读信息使用徽章 -->
    <a href="#">信息 <span class="badge">10</span></a>

    <!-- 按钮中使用未读信息徽章 -->
    <button class="btn btn-success">
        提交 <span class="badge">3</span>
    </button>

    <!-- 激活状态自动适配色调 -->
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页 <span class="badge">2</span></a></li>
        <li><a href="#">关于</a></li>
    </ul>


    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>